<script setup lang="ts">
import { ref } from 'vue';
import axios from '../api/request.ts';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/user.ts';
import VerifyCode from "./VerifyCode.vue";
import { message, Form as aForm, FormItem as aFormItem, Input as aInput, InputPassword as aInputPassword, Button as aButton } from 'ant-design-vue';

const router = useRouter();
const userStore = useUserStore();

const phone = ref('');
const password = ref('');
let code = ref("");
// 验证码图片内容
let identifyCode = ref("");
const login = async () => {
  try {
	  if (code.value == "") {
	    message.error("请先输入验证码");
	    return;
	  }
	  if (identifyCode.value.toLowerCase() == code.value.toLowerCase()) {
	   // 使用axios.post向服务器发送一个POST请求。URL参数包含用户登录的phone和password值。
	   const response = await axios.post('/users/login', null, { params: { phone: phone.value, password: password.value } });
	   // 将获取到的用户信息保存到userStore中
	   userStore.setUser(response.data.userId, response.data.userType);
	   // 界面上显示登录成功的消息提示
	   message.success('登录成功');
	   // 登录成功后，导航到首页
	   await router.push('/home-page');
	  } else {
	    message.error("验证码错误,请重新输入！");
	  }
  } catch (error) {
    // 如果登录过程中发生错误，将错误信息打印到控制台
    console.error('Error logging in:', error);
    // 并在界面上显示登录失败的消息提示
    message.error('登录失败');
  }
};
</script>

<template>
  <div class="container">
    <div class="box">
      <!-- 添加logo图片 -->
      <img src="../assets/logo.png" alt="Logo" class="logo" />
      <h1>登录</h1>
      <a-form @submit.prevent="login" class="form">
        <a-form-item label="电话">
          <a-input v-model:value="phone" />
        </a-form-item>
        <a-form-item label="密码">
          <a-input-password v-model:value="password" />
        </a-form-item>
		<a-form-item label="验证码" >
			<div style="display: flex;flex-direction: row;justify-content: center;">
				<a-input placeholder="请输入验证码" v-model:value="code" style="width: 110px;"></a-input>
				 <VerifyCode v-model:verifyCode="identifyCode"></VerifyCode>
			</div>
		</a-form-item>
        <a-form-item class="form-item-centered">
          <a-button type="primary" html-type="submit">登录</a-button>
          <router-link to="/register">注册</router-link>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style scoped>
/* 容器用于整个登录部分，水平和垂直居中内容 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 占满整个视口高度 */
  background-color: #f0f2f5; /* 可选：浅背景颜色 */
}

/* 包含表单和标题的背景框 */
.box {
  padding: 20px;           /* 框内填充 */
  background-color: white; /* 框的白色背景 */
  border-radius: 8px;      /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 微妙的阴影增加深度 */
  width: 100%;
  max-width: 320px;        /* 框的最大宽度 */
}

.logo {
  width: 50px;             /* 设置logo图片的宽度 */
  margin-bottom: 20px;      /* 图片下方的间距 */
}

/* 框内的表单 */
.form {
  width: 100%;             /* 占满框的全宽 */
}

/* 居中的标题 */
h1 {
  text-align: center;      /* 文本居中 */
  margin-bottom: 20px;     /* 标题下方的间距 */
}

/* 居中的表单项 */
a-form-item {
  width: 100%;             /* 占满框的全宽 */
}

/* 自定义类以在表单项内居中按钮和链接 */
.form-item-centered {
  display: flex;           /* 使用flexbox进行对齐 */
  flex-direction: column;  /* 垂直堆叠子元素 */
  align-items: center;     /* 水平居中子元素 */
}

/* 全宽按钮，带有下方的间距 */
a-button {
  width: 100%;             /* 占满表单项的全宽 */
  margin-bottom: 10px;     /* 按钮下方的间距 */
}

/* 居中且样式化的router链接 */
router-link {
  display: block;          /* 块级元素占满全宽 */
  text-align: center;      /* 文本居中 */
  margin-top: 10px;        /* 链接上方的间距 */
}
</style>
